<template>
	<view>
		<view v-if="orders" style="padding-bottom: 150rpx;">
			<u-cell-group>
				<u-cell-item title="车型信息" v-for="item in orders.payItemList" :title="item.item_name"
					:value="item.item_total_amount" :arrow="false">
					<view slot="label" style="">
						<text>{{item.item_real_amount}}</text>
						<text style="margin: 0 20rpx;font-weight: bold;"> / </text>
						<text>{{item.item_unit}}</text>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view style="position: fixed;width: 100%;bottom: 0rpx;padding: 0;z-index: 999;">
			<u-button type="primary" @click="toAddPayment">添加项目</u-button>
		</view>
		<u-popup v-model="show" mode="top">
			<view style="padding: 0 30rpx;">
				<u-form :model="form" ref="uForm" label-width="auto">
					<u-form-item label="项目名称">
						<u-input v-model="form.item_name" />
					</u-form-item>
					<u-form-item label="项目单价">
						<u-input v-model="form.item_single_price" />
					</u-form-item>
					<u-form-item label="项目数量">
						<u-input v-model="form.pay_item_usage" />
					</u-form-item>
					<u-form-item label="项目来源" v-if="orders.orders_source_id!=1">
						<u-radio-group v-model="form.pay_stage">
							<u-radio v-for="(item, index) in [{value:1,name:'第三方'},{value:2,name:'商户'}]" :key="index" :name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="计费方式">
						<u-radio-group v-model="form.pay_item_check_type">
							<u-radio v-for="(item, index) in [{id:1,name:'一次性收费',value:1},{id:2,name:'超时全额收费',value:2},{id:3,name:'超时部分收费',value:3}]" :key="index" :name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item>
						<u-button type="primary" @click="submit">添加</u-button>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				orders: null,
				form: {
					item_name: '',
					item_single_price: '',
					pay_item_usage: '',
					pay_item_check_type: '',
					pay_stage:''
				},
				rules: {
					remark_content: [{
						required: true,
						message: '请输入备注内容',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(options) {
			if (options.data) {
				this.orders = JSON.parse(decodeURIComponent(options.data));
			}
		},
		mounted() {
			var that = this;
			uni.$on('getOrdersInfo', function(data) {
				console.log("监听到了，啦啦啦");
				that.getOrderInfo();
			})
		},
		methods: {
			toAddPayment(){
				uni.navigateTo({
					url:'/pages/addPaymentItem/addPaymentItem?data='+encodeURIComponent(JSON.stringify(this.orders))
				})
			},
			submit() {
				var that = this;
				var form = that.form;
				form.order_id = this.orders.orders_id;
				form.orders_source_id = this.orders.orders_source_id;
				that.$http.post('/orders/addPayAmount', form, (res) => {
					if (res.data.success) {
						that.show = false;
						that.getOrderInfo();
						that.$refs.uToast.show({
							title: '添加成功',
							type: "success"
						});
						uni.$emit("getOrdersInfo", that.data);
					} else {
						that.$refs.myModal.show('登录失败', res.data.result.message);
					}
				});
			},
			getOrderInfo() {
				var that = this;
				that.$http.get('/orders/queryById?orders_id=' + this.orders.orders_id, {}, (res) => {
					if (res.data.success) {
						that.orders = res.data.result;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>